<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My Marker</title>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0">
        </script>
        <script type="text/javascript">
            var latLng;
            //you ti handle and draw the search result manually  
            google.load('search','1');
            var localSearch;
            function searchComplete() {   
			latLng=""; 
                // Check that we got results
                var value="Ket qua tim kiem";
                document.getElementById('content').innerHTML = value;

                if (localSearch.results && localSearch.results.length > 0) {
                    for (var i = 0; i < localSearch.results.length; i++) {
                        // Create HTML elements for search results
                        var p = document.createElement('p');
                        var a = document.createElement('a');
                        var b = document.createElement('b');
                        var c = document.createElement('c');
                        var d=document.createElement('d');
                        a.href = "#";
                        var result= localSearch.results[i];
                        a.innerHTML = result.title;
                        b.innerHTML = "<br>" +
                            result.streetAddress;
                        var tenQuocGia="<br>";
                        if(result.city!="")
                        {
                            tenQuocGia=tenQuocGia+result.city+",";
                        }
                        if(result.region!="")
                        {
                            tenQuocGia=tenQuocGia+result.region+",";
                        }
                        if(result.country!="")
                        {
                            tenQuocGia=tenQuocGia+result.country;
                        }
                        c.innerHTML =tenQuocGia;
                        if(result.phoneNumbers && result.phoneNumbers.length>0)
                        {
                            d.innerHTML="<br>"+ result.phoneNumbers[0].number;
                        }                        
						latLng=latLng+result.lat+","+result.lng+",";

                        // Append search results to the HTML nodes
                        p.appendChild(a);
                        p.appendChild(b);
                        p.appendChild(c);
                        p.appendChild(d);
                        
                        document.getElementById('content').appendChild(p);
                    }		
					var temp=document.createElement('k');
					temp.innerHTML=latLng;
					document.getElementById('content').appendChild(temp);
                }
                else
                {
                    var thongBao=document.createElement('p');
                    thongBao.innerHTML="Khong tim thay ket qua";
                    document.getElementById('content').appendChild(thongBao);
                }
            }
            function onLoad() {
                var diaDiem=document.getElementById('tbDiaDiem').value;
                var soThich=document.getElementById('tbSoThich').value;
                // Create a LocalSearch instance.
                localSearch = new google.search.LocalSearch();    
                // Set the Local Search center point
                localSearch.setCenterPoint(diaDiem);   
                // localSearch object will have results in it.
                localSearch.setSearchCompleteCallback(this, searchComplete, null);    
                // Specify search quer(ies)
                localSearch.execute(soThich);      
                // Include the required Google branding.
                // Note that getBranding is called on google.search.Search
                google.search.Search.getBranding('branding');
            }   
			function getLatLng()
			{
				return latLng;				
			}
        </script>  
    </head>
    <body>
        <div>
          Địa điểm:
          <input type="text" name="tbDiaDiem" id="tbDiaDiem" />
      	  <br/>Sở thích :
          <input type="text" name="tbSoThich" id="tbSoThich" />
          <br/><input name="btSearch" type="button" value="Search"  onclick="onLoad()"/>
              
        </div>    
        <div id="branding"  style="float: left;"></div><br />
        <div id="content">
        </div>
    </body>
</html>
